<!--半成品选项卡-->
<!--
<template>
  <div class="goods">
    <div class="menu-wrapper" ref="menuWrapper">
      <ul>
        <li v-for="(item,index) in goods" :class="{'current':currentIndex === index}"
            @click="selectMenu(index,$event)">
          <span class="text">
            {{item.name}}
          </span>
        </li>
      </ul>
    </div>
    <div class="foods-wrapper" ref="foodWrapper">
      <ul>
        <li v-for="item in goods" class="food-list food-list-hook">
          <h3 class="title">111{{item.name}}</h3>
          <ul>
            <li v-for="li in 20" class="food-item">
              1
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss">
  .good{
    display: flex;
    position: absolute;
    width: 100%;
    top: 174px;
    bottom: 4px;
    overflow: hidden;
  }
  .menu-wrapper{
    float: left;
    flex: 0 0 80px;
    width: 80px;
    background: #f3f5f7;
    margin-top: 44px;
  }
  .menu-wrapper li{
    height: 60px;
    border-bottom: 1px solid #fff;
    text-align: center;
    line-height: 60px;
  }
  .text{
    font-size: 12px;
    display: inline-block;
  }
  .foods-wrapper{
    float: left;
    width: 80%;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
    margin-top: 44px;
    flex: 1;
  }
  .current{
    background: red;
    color: white;
    font-weight: bold;
  }
  .food-item{
    /*height: 200px;*/
    overflow: hidden;
  }
</style>
<script>
  import BScroll from 'better-scroll'
  export default {
    name: 'Me5',
    data() {
      return {
        listHeight: [],
        scrolly: 0,
        goods: [
          {name: '1'},
          {name: '2'},
          {name: '3'},
          {name: '4'},
          {name: '5'},
          {name: '6'}
        ]
      }
    },
    created() {
      this.$nextTick(() => {
        this._initScroll();
        this._calculateHeight();
      })
    },
    computed: {
      currentIndex() {
        for (let i = 0; i < this.listHeight.length; i++) {
          let height1 = this.listHeight[i];
          let height2 = this.listHeight[i + 1];
          if (!height2 || this.scrollY >= height1 && this.scrollY < height2) {
            return i;
          }
        }
        return 0;
      }
    },
    methods: {
      _initScroll() {
        this.menuScroll = new BScroll(this.$refs.menuWrapper, {
          click: true,
          // scrollbar: false
        });
        this.repairScroll = new BScroll(this.$refs.foodWrapper, {
          probeType: 3,
          click: true,
          // scrollbar: false
        });
        this.repairScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y))
        })
      },
      selectMenu(index, event) {
        console.log(index)
        if (!event._constructed) {
          return
        }
        let repairList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
        let el = repairList[index];
        this.repairScroll.scrollToElement(el, 600)
        // console.log(index);
      },
      _calculateHeight() {
        let repairList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < repairList.length; i++) {
          let item = repairList[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      }
    }
  }
</script>
-->
<!--半成品侧滑删除-->
<!--<template>
  <div class="delete_div">
    <slider_delete :sliderConf="sliderConf">
      <div class="content"></div>
    </slider_delete>
    <div class="delete_button">
      <span>
        删除
      </span>
    </div>
  </div>
</template>
<script>
  import SliderDelete from "../common/LeftDelete";
  export default({
    data(){
      return {
        sliderConf:{//滑动配置
          distance:1.4,
        }
      }
    },
    components:{
      "slider_delete":SliderDelete,
    }
  })
</script>
<style lang="scss">
  .content{
    background-color: black;
    width:35rem;
    height: 3rem;
  }
  .delete_button{
    position: absolute;
    background-color: red;
    right: 0;
    width: 3rem;
    height: 3rem;
    text-align: center;
    span{
      color: #fff;
      line-height: 3rem;
    }
  }
  .delete_div{
    position: relative;
    padding-top: 50px;
  }
</style>-->
<template>
  <div class="mes5">
    <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" :dataList="scrollData">
      <ol>
        <li v-for="(item,index) in listdata">{{item.name}}</li>
        <li v-for="(item,index) in downdata">{{item.name}}</li>
      </ol>
    </v-scroll>
  </div>
</template>
<style lang="less">
  .mes5{
    width: 100%;
    position: relative;
    height: 600px;
    top: 50px;
  }
  ol li {
    min-height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid red;
  }
</style>
<script>
  import vScroll from '../index'
  export default {
    components: {
      'v-scroll': vScroll
    },
    data() {

      return {
        counter: 1, //当前页
        num: 10, // 一页显示多少条
        pageStart: 0, // 开始页数
        pageEnd: 0, // 结束页数
        listdata: [], // 下拉更新数据存放数组
        downdata: [], // 上拉更多的数据存放数组
        scrollData:{
          noFlag: false //暂无更多数据显示
        }
      }
    },
    mounted: function() {
      this.getList();
    },
    methods: {
      getList() {
        var response = []
        for(let i = 0; i < 60; i++) {
          response.push({
            name: i
          })
        }
        this.listdata = response.slice(0, this.num);
      },
      onRefresh(done) {
        this.getList();
        done(); // call done
      },
      onInfinite(done) {
        this.counter++;
        let end = this.pageEnd = this.num * this.counter;
        let i = this.pageStart = this.pageEnd - this.num;
        let more = this.$el.querySelector('.load-more')
        for(i; i < end; i++) {
          if(i >= 30) {
            more.style.display = 'none'; //隐藏加载条
            //走完数据调用方法
            this.scrollData.noFlag = true;
            break;
          } else {
            this.downdata.push({
              name: i + "==="
            })
            more.style.display = 'none'; //隐藏加载条
          }
        }
        done();
      }
    }
  }
</script>
